<template>
  <div class="page_content">
    <navigate :isVisibleBack="false">功能中心</navigate>
    <div class="page_ctt">
      <div class="box_container bottom_gap">
        <div class="inner_title function_height function_title_gap">
          <img
            class="deraction_img"
            src="@/assets/images/function/recommend.png"
            alt
          />
          <div>推荐功能</div>
        </div>
        <div class="inner_ctt function_ctt">
          <div
            class="fun_item"
            v-for="r in functionList"
            :key="r.label"
            @click="routerSkip(r.routerPath)"
          >
            <img class="fun_img" :src="r.img" alt />
            <div class="fun_text_box">
              <div class="fun_text_main">{{ r.label }}</div>
              <div class="fun_small">
                <img :src="r.icon" alt />
                <div>{{ r.text }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="box_container bottom_gap" v-if="false">
        <div class="inner_title list_height list_title_gap">
          <img class="deraction_img" src="@/assets/images/common/bar.png" alt />
          <div>使用记录</div>
        </div>
        <div class="inner_ctt">
          <div
            @click="routerSkip(r.routerPath)"
            class="son_item"
            v-for="(r, i) in useList"
            :key="r.label"
          >
            <img
              class="son_img"
              :style="`--color: ${colorList[i]}`"
              :src="r.icon"
              alt
            />
            <div class="son_text nowrap">{{ r.label }}</div>
          </div>
        </div>
      </div>

      <div class="box_container bottom_gap">
        <div class="inner_title list_height list_title_gap">
          <img class="deraction_img" src="@/assets/images/common/bar.png" alt />
          <div>活动互动</div>
        </div>
        <div class="inner_ctt">
          <div
            class="son_item"
            @click="routerSkip(r.routerPath)"
            v-for="(r, i) in activityList"
            :key="r.label"
          >
            <img
              class="son_img"
              :style="`--color: ${colorList[i]}`"
              :src="r.icon"
              alt
            />
            <div class="son_text nowrap">{{ r.text }}</div>
          </div>
        </div>
      </div>

      <div class="box_container bottom_gap">
        <div class="inner_title list_height list_title_gap">
          <img class="deraction_img" src="@/assets/images/common/bar.png" alt />
          <div>个人使用</div>
        </div>
        <div class="inner_ctt">
          <div
            class="son_item"
            @click="routerSkip(r.routerPath)"
            v-for="(r, i) in infoList"
            :key="r.label"
          >
            <img
              class="son_img"
              :style="`--color: ${colorList[i]}`"
              :src="r.icon"
              alt
            />
            <div class="son_text nowrap">{{ r.label }}</div>
          </div>
        </div>
      </div>

      <div class="box_container bottom_gap">
        <div class="inner_title list_height list_title_gap">
          <img class="deraction_img" src="@/assets/images/common/bar.png" alt />
          <div>心灵放松</div>
        </div>
        <div class="inner_ctt">
          <div
            class="son_item"
            v-for="(r, i) in relaxList"
            :key="r.label"
            @click="routerSkip(r.routerPath)"
          >
            <img
              class="son_img"
              :style="`--color: ${colorList[i]}`"
              :src="r.icon"
              alt
            />
            <div class="son_text nowrap">{{ r.label }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      functionList: [
        {
          label: "音乐舒缓心情",
          img: require("@/assets/images/function/recommend1.png"),
          icon: require("@/assets/images/function/recommends1.png"),
          text: "心理音乐",
          routerPath: "/psychologicalMusic",
        },
        {
          label: "了解心理知识",
          img: require("@/assets/images/function/recommend2.png"),
          icon: require("@/assets/images/function/recommends2.png"),
          text: "心理学堂",
          routerPath: "/psychologySchool",
        },
        {
          label: "定期更新自评",
          img: require("@/assets/images/function/recommend3.png"),
          icon: require("@/assets/images/function/recommends3.png"),
          text: "个人自评",
          routerPath: "/selfAssessment",
        },
      ],
      activityList: [
        {
          img: require("@/assets/images/function/recommend1.png"),
          icon: require("@/assets/images/function/activity1.png"),
          text: "团体活动",
          routerPath: "/groupActivity",
        },
        {
          img: require("@/assets/images/function/recommend1.png"),
          icon: require("@/assets/images/function/activity2.png"),
          text: "培训讲座",
          routerPath: "/trainingLecture",
        },
        {
          img: require("@/assets/images/function/recommend1.png"),
          icon: require("@/assets/images/function/activity3.png"),
          text: "心理学堂",
          routerPath: "/psychologySchool",
        },
        {
          img: require("@/assets/images/function/recommend1.png"),
          icon: require("@/assets/images/function/activity4.png"),
          text: "心灵智慧树",
          routerPath: "/wisdomTree",
        },
      ],
      useList: [
        {
          label: "咨询记录",
          icon: require("@/assets/images/function/use1.png"),
          routerPath: "/consultationRecord",
        },
        {
          label: "预约记录",
          icon: require("@/assets/images/function/use2.png"),
          routerPath: "/appointmentRecord",
        },
        {
          label: "无线测评",
          icon: require("@/assets/images/function/use3.png"),
        },
        {
          label: "普通测评",
          icon: require("@/assets/images/function/use4.png"),
          routerPath: "/evaluateRecord",
        },
        {
          label: "团体测评",
          icon: require("@/assets/images/function/use5.png"),
          routerPath: "/teamEvaluateExport",
        },
      ],
      infoList: [
        {
          label: "用户档案",
          icon: require("@/assets/images/function/info1.png"),
          routerPath: "/userRecord",
        },
        {
          label: "个人自评",
          icon: require("@/assets/images/function/info2.png"),
          routerPath: "/selfAssessment",
        },
        {
          label: "危机上报",
          icon: require("@/assets/images/function/info2.png"),
          routerPath: "/crisisReport",
        },
      ],
      relaxList: [
        {
          label: "心理音乐",
          icon: require("@/assets/images/function/relax1.png"),
          routerPath: "/psychologicalMusic",
        },
        {
          label: "心理视频",
          icon: require("@/assets/images/function/relax2.png"),
          routerPath: "/psychologicalVideo",
        },
        {
          label: "心理图片",
          icon: require("@/assets/images/function/relax3.png"),
          routerPath: "/psychologicalPicture",
        },
        {
          label: "心理文章",
          icon: require("@/assets/images/function/relax4.png"),
          routerPath: "/psychologicalArticle",
        },
        // {
        //   label: "小游戏",
        //   icon: require("@/assets/images/function/relax5.png"),
        //   routerPath: "/game",
        // },
        // {
        //   label: "呐喊放松",
        //   icon: require("@/assets/images/function/relax5.png"),
        // },
      ],
      colorList: ["#00AEFF", "#29CCA6", "#FF9500", "#A4CC3B", "#00CCFF"],
    };
  },
  methods: {
    routerSkip(path) {
      if (path) {
        if (path == "/selfAssessment") {
          this.$router.push(`/selfAssessment/1/0`);
        } else {
          this.$router.push(path);
        }
      } else {
        this.$toast.fail("此功能暂未开放，敬请期待！");
      }
    },
  },
};
</script>

<style scoped>
.box_container {
  width: 354.17px;
  background: #ffffff;
  border-radius: 6.94px;
  margin: 0 auto;
  padding: 7.64px 6.94px 8px 6.94px;
  box-sizing: border-box;
}

.page_ctt {
  height: calc(100% - 62.5px);
  overflow-y: auto;
  padding-top: 10.42px;
  box-sizing: border-box;
}

.bottom_gap {
  margin-bottom: 10.42px;
}

.function_title_gap {
  margin-bottom: 4.17px;
}

.list_title_gap {
  margin-bottom: 22.57px;
}

.inner_title {
  height: 24.31px;
  font-size: 15.97px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: bold;
  text-align: left;
  color: #333333;
  display: flex;
  margin-bottom: 19.1px;
}

.function_height {
  height: 24.13px;
  margin-bottom: 12.15px;
}

.list_height {
  height: 24.31px;
  margin-bottom: 19.1px;
}

.deraction_img {
  height: 15.97px;
  margin-right: 10.42px;
}

.fun_item {
  width: 128.13px;
  height: 140.63px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.fun_img {
  width: 128.13px;
  height: 86.81px;
}

.fun_text_box {
  width: 100%;
  height: 53.82px;
  background: #f4f6fa;
  border-radius: 0px 0px 6.94px 6.94px;
  display: grid;
  align-content: center;
  gap: 6.6px;
}

.fun_text_main {
  height: 14.24px;
  font-size: 13.89px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: bold;
  text-align: center;
  color: #333333;
}

.fun_small {
  display: flex;
  gap: 4.51px;
  align-items: center;
  margin: 0 auto;
}

.fun_small img {
  width: 12.5px;
  height: 12.5px;
}

.fun_small div {
  font-size: 11.11px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: left;
  color: #555555;
}

.inner_ctt {
  display: flex;
}

.function_ctt {
  gap: 6.94px;
  overflow-x: auto;
}

.function_ctt::-webkit-scrollbar {
  display: none;
}

.son_item {
  /* width: 50px; */
  margin-left: 20.93px;
  cursor: pointer;
}

.son_item:nth-child(1) {
  margin-left: 0;
}

.son_text {
  /* width: 50px;
  height: 36.45px; */
  line-height: 36.45px;
  font-size: 12.5px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: left;
  color: #333333;
}

.son_img {
  display: block;
  margin: 0 auto;
  width: 41.67px;
  height: 41.67px;
  border-radius: 13.89px;
  background: var(--color);
}
</style>
